<template>
  <div>
    <a-card>
      <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvent">
        <template #action="{ row }">
          <vxe-button
            status="primary"
            content="选择"
            @click="selectRow(row)"
          ></vxe-button>
        </template>
      </vxe-grid>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { VxeUI } from 'vxe-pc-ui'
const { gridOptions } = useUserSearch();
import XEUtils from 'xe-utils'
const formRef = ref()
const showEditPopup = ref(false)
const loading = ref(false)
const selectRow = ref<RowVO>()
const defaultData: RowVO = {
  id: null,
  name: '',
  user_name: '',
  role: '',
  sex: '',
  age: null,
  address: ''
}
const sexItemRender = reactive<VxeFormItemPropTypes.ItemRender>({
  name: 'VxeSelect',
  options: [
    { label: '女', value: 'Women' },
    { label: '男', value: 'Man' }
  ]
})



const selectRow = (row: RowVO) => {
  selectRow.value = row
  formOptions.data = Object.assign(XEUtils.clone(defaultData, true), row)
  showEditPopup.value = true
}

const xGrid = ref();
const gridEvent: VxeGridListeners<RowVO> = {
  proxyQuery() {
    console.log("数据代理查询事件");
    const grid = xGrid.value;
    // 获取表格中的数据
    // const data = grid.getTableData().fullData;
    // console.log(data);
  },
  proxyDelete() {
    console.log("数据代理删除事件");
  },
  proxySave() {
    console.log("数据代理保存事件");
  },
};

const remove = (row: any) => {
  console.log(row);
};
</script>

<style></style>
